<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<u-card :title="title">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"  v-for="(item, index) in dataList" :key="item.imtId" @click="onClick(item.imtId)">
					<view class="u-body-item-title u-line-2">{{item.title}}</view>
					<image :src="'http://localhost:8088'+item.imgUrl" mode="aspectFill"></image>
				</view>
			</view>
		</u-card>
		<u-loadmore :status="status" :margin-top="10" :margin-bottom="10"/>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				title: "资讯列表",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				status: 'loadmore',
				dataList:[],
				pageTotal:0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				Vue.prototype.$u.api.getInformation({
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize
				}).then(res => {
					if(res.total < this.queryParams.pageSize){
						this.status = 'nomore'
					}
					this.pageTotal = Math.ceil(res.total/this.queryParams.pageSize);
					if(res.code == 200 && res.rows.length > 0){
						this.dataList = res.rows
					}
				})
			},
			onClick(imtId){
				uni.navigateTo({
				    url: '/pages/information/details?imtId='+imtId
				});
			},
			onReachBottom() {
				this.status = 'loading';
				this.queryParams.pageNum = ++this.queryParams.pageNum;
				if(this.queryParams.pageNum <= this.pageTotal){
					setTimeout(()=>{
						Vue.prototype.$u.api.getInformation({
							pageNum: this.queryParams.pageNum,
							pageSize: this.queryParams.pageSize
						}).then(res => {
							if(res.code == 200 && res.rows.length > 0){
								this.dataList = this.dataList.concat(res.rows)
								this.status = 'loadmore';
							}else{
								this.status = 'nomore'
							}
						})
					},1000)
				}else {
					this.status = 'nomore'
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
